<template>
    <div>
        <el-dialog v-model="innerVisible" width="600" title="设置密码" append-to-body :close-on-click-modal="false">
            <div class="top fs14 mb20">
                <span>发送至手机</span>
                <div class="bac_blue phone blue">
                    <img src="../../assets/image/phone-icon.png" alt="" />
                    +86 {{ phonenumber }}
                </div>
            </div>
            <div class="form">
                <div class="mb8">验证码</div>
                <div class="ipt mb24 flex">
                    <el-input v-model="name" placeholder="请输入验证码" />
                    <div class="hqyzmbtn" @click="getyzm">
                        {{ isdjs ? num + '秒后获取' : '获取验证码' }}
                    </div>
                </div>
                <div class="mb8">密码</div>
                <div class="ipt mb24" style="height: 40px">
                    <el-input style="height: 100%" v-model="password" type="password"
                        placeholder="设置新密码 (8-20位字符，包含字母数字)" show-password @blur="blurfn" @input="blurfn" />
                </div>
                <div v-if="isfalse" class="fs14" style="
                        padding-left: 20px;
                        color: #ea0000;
                        margin-top: -10px;
                    ">
                    密码格式不正确
                </div>
            </div>
            <template #footer>
                <el-button @click="cancle">取消</el-button>
                <el-button type="primary" @click="sure">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
    getuserinfoapi,
    getlogincodeapi,
    updatecrmloginpwdapi
} from '@/api/api'
import { shake } from '@/utils/utils'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})
// onMounted(() => {
//     getuserinfoapi().then((res: any) => {
//         phonenumber.value = res.user.phonenumber;
//     });
// });
const blurfn = () => {
    shake(() => {
        const regex = /^(?=.*[0-9])(?=.*[a-zA-Z]).{8,20}$/
        const isValid = regex.test(password.value)
        console.log(isValid)
        if (!isValid) {
            isfalse.value = true
        } else {
            isfalse.value = false
        }
    }, 600)
}
const isfalse = ref(false)
const num = ref(60)
const cancle = () => {
    name.value = ''
    password.value = ''
    isfalse.value = false
    innerVisible.value = false
}
const getyzm = () => {
    if (isdjs.value) {
        ElMessage({
            type: 'warning',
            message: '短信不要频繁发送哦！'
        })
        return
    }
    isdjs.value = true
    const timer = setInterval(() => {
        num.value -= 1
        if (num.value <= 0) {
            num.value = 60
            clearInterval(timer)
            isdjs.value = false
        }
    }, 1000)
    let code = '' //声明一个空的字符串值用于后面赋值
    const codeLength = 6 //随机密码的长度
    const random = [1, 1, 2, 3, 4, 5, 6, 7, 8, 9, 2] //随机数的取值范围
    for (let i = 0; i < codeLength; i++) {
        //循环遍历codeLength，值是几，就循环几次
        const index = Math.floor(Math.random() * 10)
        code += random[index] //根据索引取得随机数加到code上
    }
    getlogincodeapi({
        passCard: code,
        phone: phonenumber.value
    }).then((res: any) => {
        console.log(res)
    })
}
const isdjs = ref(false)
const sure = () => {
    if (name.value === '') {
        ElMessage({
            message: '请输入验证码',
            type: 'warning'
        })
        return
    }
    if (password.value === '') {
        ElMessage({
            message: '请输入密码',
            type: 'warning'
        })
        return
    }
    if (isfalse.value) {
        return
    }
    updatecrmloginpwdapi({
        newPassword: password.value,
        phone: phonenumber.value,
        verifyCode: name.value
    }).then((res: any) => {
        console.log(res)
        if (res.code === 200) {
            ElMessage({
                message: '修改成功',
                type: 'success'
            })
            cancle()
        }
    })
}
const name = ref('')
const password = ref('')
const phonenumber = ref('')
const innerVisible = ref(false)
const emits = defineEmits(['update:show'])
watch(
    () => props.show,
    (newval) => {
        innerVisible.value = newval
        getuserinfoapi().then((res: any) => {
            phonenumber.value = res.user.phonenumber
        })
    }
)
watch(innerVisible, (newval) => {
    emits('update:show', newval)
})
</script>

<style scoped lang="scss">
.flex {
    display: flex;
}

.hqyzmbtn {
    cursor: pointer;
    margin-left: 10px;
    width: 98px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: 1px solid #eaeaef;
    font-size: 14px;
    color: #3e5ff5;
}

.fs14 {
    font-size: 14px;
}

.bac_blue {
    background: rgba(62, 95, 245, 0.12);
}

.top {
    display: flex;
    align-items: center;
}

.phone {
    padding: 0 12px 0 4px;
    margin-left: 8px;
    width: 160px;
    height: 30px;

    img {
        width: 24px;
        height: 24px;
    }

    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 4px;
}

.blue {
    color: #3e5ff5;
}

.mb20 {
    margin-bottom: 20px;
}

.mb24 {
    margin-bottom: 24px;
}

.mb8 {
    margin-bottom: 8px;
}

:deep(.el-input__inner) {
    color: #202428 !important;
}
</style>
